<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/ui.jqgrid.css">
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/pepper-grinder/jquery-ui-1.10.3.custom.css">
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/styles.css"/>
	
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jqgrid/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jqgrid/grid.locale-es.js"></script>
</head>

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>

	//-------------GOOGLE MAP---------------------//
	
	function initialize(datos){
		//Ejemplo
		/*
		 		var myCenter=new google.maps.LatLng(-34.6,-58.45);
		var myCenter2=new google.maps.LatLng(-34.66,-58.45);

		var mapProp = {
		  center:myCenter,
		  zoom:10,
		  mapTypeId:google.maps.MapTypeId.ROADMAP
 		};

		var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
		
		var marker=new google.maps.Marker({
	  		position:myCenter,
	  	});
	  
	 	var marker2=new google.maps.Marker({
	  		position:myCenter2,
	  	}); 
	
		marker.setMap(map);
		marker2.setMap(map);
		
		var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
		 */
		var centros = new Array();
		var marcas = new Array();
		var mensajes = new Array();
		var latitud = null;
		var longitud = null;
		var map = null;
		for(var i = 0; i < datos.length; i++){
			latitud = datos[i].latitud;
			longitud = datos[i].longitud;
			if(latitud != null && longitud != null){
				centros[i] = new google.maps.LatLng(latitud,longitud);
				if(i == 0){
					var mapProp = {
		  				center:centros[i],
		  				zoom:11,
		  				mapTypeId:google.maps.MapTypeId.ROADMAP
 					};
 					
 					map = new google.maps.Map(document.getElementById("googleMap"),mapProp);	
				}
				
				marcas[i] = new google.maps.Marker({
	  				position:centros[i],
	  				
	  			});
	  			
	  			marcas[i].setMap(map);
	  			
	  			var pos = new google.maps.LatLng(parseFloat(latitud) + 0.0001,longitud);
				mensajes[i] = new google.maps.InfoWindow({
        			map: map,
       	 			position: pos,
			        content: datos[i].nombreApell
			    });	
			}
		}
	}
	
	function cargarMapa(datos){
		if(datos[0].latitud != null && datos[0].longitud != null){
			google.maps.event.addDomListener(window, 'load', initialize(datos));	
		}else{
			mostrarMsj("Tecnico","INFO","La posición del técnico no está disponible");
		}
	}
	
	//-------------GOOGLE MAP FIN---------------------//
	jQuery(document).ready(function () {
		
		$.ajax({
		    	url: "../nroOrdenConsulta/obtenerPosicionesCliTecnico",
		    	async:false,
		    	type: "GET",
		    	dataType: "json" 
		    }).done(function( response ){
		    	cargarMapa(response.datos);		
		    });        	
        // MENSAJES
		$(".message").click(function () {
	 		$(this).fadeOut();
	 	});
	
	});
	
	
</script>
</head>

<body>
<?php
	require 'web/pages/commons/header.php';
	?>
	<div class="message blue" id="msjINFOTecnico" style="width: 900px;display:none; margin-left: 45px;margin-top: 10px;">
		<span></span>
 	</div>
 	<div class="message blue" id="msjINFOCliente" style="width: 900px; margin-left: 45px;margin-top: 10px;">
		<span>El tiempo estimado considera las tareas que tiene el técnico previas a la tarea que usted ha creado.
			No se está incluido el tiempo de llegada a su domicilio</span>
 	</div>
 	<div>
	 	<div style="width: 380px;margin-left: 20px;float: left">
			<div class="titulo" style="width: 350px;">
				<b style="font-size: 18px">Estado del técnico</b>
			</div>
			<div class="linea">
				<b>Nombre del técnico: </b>
				<?php if(isset($nombreTecnico)) : ?>
					<?php echo $nombreTecnico?>
				<?php endif; ?>	
			</div>
			<div class="linea">
				<b>Tiempo estimado de llegada: </b>
				<?php if(isset($tiempoEstimado)) : ?>
					<?php echo $tiempoEstimado . ' minutos'?>
				<?php endif; ?>	
			</div>		
		</div>	
		<div id="googleMap" style="float:right; width:600px;height:450px; margin-left: 10px;margin-right: 20px"></div>
	</div>
</body>
</html>
